<template>
	<view class="business">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				门店详情
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}"></view>
		<view class="shang clearfix">
			<view class="left fl clearfix">
				<image v-if="info.stationinfo.sitepicture==''||info.stationinfo.sitepicture==null"
					:src="baseUrl + '/wximage/saoma.png'" class="fl"></image>
				<image v-else :src="info.stationinfo.sitepicture" class="fl"></image>
				<view class="fl">
					<view class="title">{{info.stationinfo.name}}</view>
					<view class="address">{{info.stationinfo.full_address}}</view>
				</view>
			</view>
			<view class="right fr clearfix"
				@click="topage('/subpackageA/store/edit?storeid='+info.stationinfo.id+'&bussinessid='+info.stationinfo.charger_bussiness_id)">
				<image :src="baseUrl + '/wximage/edit.png'" class="fl"></image>
			</view>
		</view>
		<view class="nr">
			<view class="list">
				<view class="liebiao clearfix">
					<view class="left fl">联系人：</view>
					<view class="right fl">
						<view class="title">{{info.stationinfo.lxname==null?'无':info.stationinfo.lxname}}</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">联系电话：</view>
					<view class="right fl">
						<view class="title">{{info.stationinfo.phone==null?'无':info.stationinfo.phone}}</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">门店类型：</view>
					<view class="right fl">
						<view class="title">{{info.stationinfo.storetypename}}</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">所属商户：</view>
					<view class="right fl">
						<view class="name"> {{info.stationinfo.charger_bussiness_name}}<text
								@click="topage('/subpackageA/store/bussinessliebiao?stationid='+info.stationinfo.id)">修改</text>
						</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">所属员工：</view>
					<view class="right fl">
						<view class="title"
							v-if="info.stationinfo.charger_yuangong_name==null||charger_yuangong_name==''">无</view>
						<view class="title" v-else>{{info.stationinfo.charger_yuangong_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fenlei">
			<view class="list" v-if="info.stationinfo.powerbank == 1" @click="topage('/subpackageA/pricing/index2?stationid='+stationid)">
				<image :src="baseUrl + '/wximage/mendiantb1.png'"></image>
				<view class="name">充电宝策略</view>
			</view>
			<view class="list" @click="scanCode">
				<image :src="baseUrl + '/wximage/mendiantb2.png'"></image>
				<view class="name">设备安装</view>
			</view>
			<view class="list" @click="topage('/subpackageA/equipment/huishou')">
				<image :src="baseUrl + '/wximage/mendiantb3.png'"></image>
				<view class="name">设备回收</view>
			</view>
			<view class="list" v-if="info.stationinfo.chargingline == 1" @click="topage('/subpackageA/pricing/chargerline2?stationid='+stationid)">
				<image :src="baseUrl + '/wximage/mendiantb4.png'"></image>
				<view class="name">充电线策略</view>
			</view>
			<view class="list" v-if="info.stationinfo.chargingline == 1" @click="topage('/subpackageA/store/stock?stationid='+stationid)">
				<image :src="baseUrl + '/wximage/mendiantb4.png'"></image>
				<view class="name">缺货明细</view>
			</view>
		</view>
		<view class="nav">
			<view :class="[attrIndex==1?'li active':'li']" @click="attrIndex = 1">
				<text class="title">数据</text>
				<view class="hengxian"></view>
			</view>
			<view :class="[attrIndex==2?'li active':'li']" @click="attrIndex = 2">
				<text class="title">设备</text>
				<view class="hengxian"></view>
			</view>
			<view :class="[attrIndex==3?'li active':'li']" @click="attrIndex = 3">
				<text class="title">订单</text>
				<view class="hengxian"></view>
			</view>
			<view :class="[attrIndex==4?'li active':'li']" @click="attrIndex = 4" v-if="info.stationinfo.chargingline == 1">
				<text class="title">WIFI</text>
				<view class="hengxian"></view>
			</view>
		</view>
		<view class="shujutj" v-if="attrIndex == 1">
			<view class="tongji">
				<view class="heads clearfix">
					<view class="left fl">
						<image :src="baseUrl + '/wximage/hktubiao.png'"></image>
						<view class="name">运营数据</view>
					</view>
				</view>
				<view class="shuju clearfix">
					<view class="liebiao">
						<view class="shuzi" v-if="info.orderinfo.ordernum==null||info.orderinfo.ordernum==''">0</view>
						<view class="shuzi" v-else>{{info.orderinfo.ordernum}}</view>
						<view class="names">总订单</view>
					</view>
					<view class="liebiao">
						<view class="shuzi" v-if="info.orderpaynum.paynum==null||info.orderpaynum.paynum==''">0</view>
						<view class="shuzi" v-else>{{info.orderpaynum.paynum}}</view>
						<view class="names">支付订单数</view>
					</view>
					<view class="liebiao">
						<view class="shuzi" v-if="info.orderpaynum.moneysum==null||info.orderpaynum.moneysum==''">0
						</view>
						<view class="shuzi" v-else>{{info.orderpaynum.moneysum}}</view>

						<view class="names">支付订单金额</view>
					</view>
					<view class="liebiao">
						<view class="shuzi" v-if="info.orderpaynum.refundsum==null||info.orderpaynum.refundsum==''">0
						</view>
						<view class="shuzi" v-else>{{info.orderpaynum.refundsum}}</view>
						<view class="names">退款金额</view>
					</view>
				</view>
			</view>
			<view class="tongji">
				<view class="heads clearfix">
					<view class="left fl">
						<image :src="baseUrl + '/wximage/hktubiao.png'"></image>
						<view class="name">设备数据</view>
					</view>
				</view>
				<view class="shuju clearfix">
					<view class="liebiao">
						<view class="shuzi">{{info.chargerinfo.chargernum}}</view>
						<view class="names">总设备</view>
					</view>
					<view class="liebiao">
						<view class="shuzi">{{info.chargerinfo.chargerline}}</view>
						<view class="names">在线设备</view>
					</view>
					<view class="liebiao">
						<view class="shuzi">{{info.chargerinfo.chargerno}}</view>
						<view class="names">离线设备</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shebei" v-if="attrIndex == 2">
			<view class="data">
				<view>总设备数：<text>{{info.chargerinfo.chargernum==null?0:info.chargerinfo.chargernum}}</text>台</view>
				<view>总仓位数：<text>{{info.chargerinfo.batterysum==null?0:info.chargerinfo.batterysum}}</text>台</view>
				<view>仓内宝数：<text>{{info.chargerinfo.lendsum==null?0:info.chargerinfo.lendsum}}</text>台</view>
				<view>租借中数：<text>{{info.chargerinfo.linesum==null?0:info.chargerinfo.linesum}}</text>台</view>
			</view>
			<view class="content" v-if="info.chargerlist.length != 0">
				<view class="list" v-for="(item,index) in info.chargerlist" :key="index">
					<view v-if="item.type == 1">
						<!-- 充电宝 -->
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/ordertubiao.png'" class="fl"></image>
							<view class="title fl">仓内宝数：{{item.charger_battery_line}} 借出宝数：{{item.charger_battery_lend!=null?item.charger_battery_lend:0}}
							</view>
							<view class="money fr" v-if="item.charger_runstatus==1">在线</view>
							<view class="money fr" v-else>离线</view>
						</view>
						<view class="center">
							<view class="desc"
								@click="topage('/subpackageA/equipment/weihu?deviceid='+item.charger_number)">设备编码：<text
									class="color">{{item.charger_number}}</text></view>
							<view class="desc">所属商户：{{item.charger_bussiness_name}}</view>
						</view>
						<view class="bottom clearfix" v-if="charger_id != item.id" @click="charger_id = item.id">
							<view class="">
								<view class="name">展开</view>
								<image :src="baseUrl + '/wximage/right.png'"></image>
							</view>
						</view>
						<view class="bottom clearfix" v-else @click="charger_id = ''">
							<view class="desc">所属代理商：{{item.charger_agents_name}}</view>
							<view class="desc">设备名称：{{item.charger_name}}</view>
							<view class="desc">安装时间：{{item.created_at}}</view>
							<view class="desc" v-if="item.charger_battery != null">仓内数量：{{item.charger_battery}}</view>
							<view class="desc" v-if="item.charger_battery_line != null">仓内宝数量：{{item.charger_battery_line}}</view>
							<view class="desc" v-if="item.charger_battery_lend != null">借宝中数量：{{item.charger_battery_lend}}</view>
							<view class="desc" v-if="item.charger_battery_dis != null">禁仓宝数量：{{item.charger_battery_dis}}</view>
							<image :src="baseUrl + '/wximage/shang.png'" @click="guanbi"></image>
						</view>
					</view>
					<view v-if="item.type == 2">
						<!-- 售货机 -->
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/orderhezitubiao.png'" class="fl"></image>
							<view class="title fl">设备名称：{{item.charger_name}}</view>
							<view class="money fr"></view>
						</view>
						<view class="center">
							<view class="desc" @click="topage('/subpackageA/goods/weihu?deviceid='+item.charger_number)">设备编码：<text class="color">{{item.charger_number}}</text></view>
							<view class="desc">设备型号：{{item.charger_typename}}</view>
							<view class="desc" v-if="item.charger_yuangong_name">所属员工：{{item.charger_yuangong_name}}</view>
							<view class="desc" v-if="item.charger_bussiness_name">所属商户：{{item.charger_bussiness_name}}</view>
							<view class="desc" v-if="item.charger_station_name" @click="topage('/subpackageA/store/detail?stationid=' + item.charger_station_id)">所属门店：<text class="color">{{item.charger_station_name}}</text></view>
						</view>
					</view>
					<view v-if="item.type == 3">
						<!-- 充电线 -->
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/ordercdxtubiao.png'" class="fl"></image>
							<view class="title fl">设备名称：{{item.charger_name}}</view>
							<view class="money fr"></view>
						</view>
						<view class="center">
							<view class="desc" @click="topage('/subpackageA/goods/weihu?deviceid='+item.charger_number)">设备编码：<text class="color">{{item.charger_number}}</text></view>
							<view class="desc">设备型号：{{item.charger_typename}}</view>
							<view class="desc" v-if="item.charger_yuangong_name">所属员工：{{item.charger_yuangong_name}}</view>
							<view class="desc" v-if="item.charger_bussiness_name">所属商户：{{item.charger_bussiness_name}}</view>
							<view class="desc" v-if="item.charger_station_name" @click="topage('/subpackageA/store/detail?stationid=' + item.charger_station_id)">所属门店：<text class="color">{{item.charger_station_name}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image :src="baseUrl + '/wximage/empty.png'"></image>
				<text>暂无相关数据</text>
			</view>
		</view>
		<view class="order" v-if="attrIndex == 3">
			<view class="dingdan" v-if="info.orderlist.length != 0">
				<view class="li clearfix" v-for="(item,index) in info.orderlist" :key="index">
					<view class="cen">
						<text class="title">{{item.out_order_no}}</text>
						<text class="time">设备编码：{{item.charge_number}}</text>
					</view>
					<view class="right">已支付{{item.emoney}}元</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image :src="baseUrl + '/wximage/empty.png'"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<view class="order" v-if="attrIndex == 4">
			<view class="dingdan" v-if="info.wifilist.length != 0">
				<view class="li clearfix" v-for="(item,index) in info.wifilist" :key="index">
					<view class="cen">
						<text class="title">名称：{{item.username}}</text>
						<text class="title">密码：{{item.password}}</text>
					</view>
					<view class="right" @click="topage('/subpackageA/wifi/edit?station_id=' + stationid + '&id=' + item.id)">编辑</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image :src="baseUrl + '/wximage/empty.png'"></image>
				<text @click="topage('/subpackageA/wifi/add?station_id=' + stationid)">暂无数据,前去添加</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				list: [1],
				attrIndex: 1,
				info: {},
				formData: {

				},
				stationid: '',
				charger_id: '',
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			this.stationid = options.stationid;
		},
		onShow() {
			this.stationInfo();
		},
		methods: {
			stationInfo() {
				this.request({
					url: '/agent/stationdatainfo',
					data: {
						stationid: this.stationid
					},
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {
						// // 返回二维码路径,可以接收参数
						// var qrcodeNumber = res.result.split("=")[1];
						if (res.result) {
							let url = res.result;

							let qrcodeurl = getApp().globalData.baseUrl;

							if (url.indexOf('/scan') > -1) {
								var arrUrl = url.split('qrcodenumber=');
								// console.log(arrUrl[1]);
								var qrcode = arrUrl[1];
								var formData = {
									'station_id': this.stationid,
									'bussiness_id': '',
									'qrcode': qrcode,
									'agentid': uni.getStorageSync('agent_id')
								}
								//请求接口绑定该商户
								this.request({
									url: '/xcxlogin/bindbussiness',
									data: formData,
									method: "POST"
								}).then(res => {
									if (res.data.code == 200) {
										// var stores_id = res.data.data.id;//用户id
										uni.showToast({
											title: '绑定成功',
											icon: 'none'
										});

									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'none'
										});
									}
								})

							}
						}
					},
					fail: (res) => {
						console.log("未识别到二维码");
					}
				})
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.business {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;
		padding-bottom: 60rpx;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			box-sizing: border-box;
		}

		.shang {
			width: 94%;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: -280rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
			padding: 26rpx 28rpx;

			.left {
				width: 90%;

				>view {
					width: 74%;
				}

				image {
					width: 148rpx;
					height: 148rpx;
				}

				.title {
					font-size: 32rpx;
					color: #333333;
					font-weight: 700;
					margin-top: 20rpx;
					margin-left: 28rpx;
					margin-bottom: 14rpx;
				}

				.address {
					font-size: 28rpx;
					color: #333333;
					margin-left: 28rpx;
				}
			}

			.right {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
				}
			}
		}

		.nr {
			width: 90%;
			margin: 0 auto;
			z-index: 70;
			margin-top: 20rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;

			.list {
				width: 100%;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 40rpx 40rpx 10rpx;
				position: relative;

				.liebiao {
					margin-bottom: 30rpx;

					.left {
						font-size: 24rpx;
						color: #333333;
						margin-right: 30rpx;
					}

					.right {

						.title {
							font-size: 24rpx;
							color: #333333;
						}

						.name {
							font-size: 24rpx;
							color: #5C88FA;

							text {
								font-size: 24rpx;
								color: #5C88FA;
								display: inline-block;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
		}

		.fenlei {
			width: 90%;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 26rpx;
			margin-top: 20rpx;
			padding-bottom: 12rpx;
			padding-top: 10rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.list {
				// width: 25%;
				text-align: center;
				// float: left;

				image {
					width: 72rpx;
					height: 72rpx;
				}

				.name {
					font-size: 24rpx;
					color: #333333;
					margin-top: -4rpx;
				}
			}
		}

		.nav {
			width: 90%;
			margin: 0 auto;
			margin-top: 40rpx;

			.li {
				display: inline-block;
				margin-right: 40rpx;

				.title {
					font-size: 28rpx;
					color: #333333;
				}
			}

			.active {
				position: relative;

				.title {
					font-size: 32rpx;
					font-weight: 700;
				}

				.hengxian {
					position: absolute;
					left: 0;
					bottom: 2rpx;
					width: 60rpx;
					height: 8rpx;
					border-radius: 6rpx;
					background: linear-gradient(90deg, #368BF8, #66BFFC);
				}
			}
		}

		.shujutj {
			margin-top: 24rpx;

			.tongji {
				width: 90%;
				margin: 0 auto;
				z-index: 70;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;

				.heads {
					width: 100%;
					padding: 24rpx 20rpx 0;
					box-sizing: border-box;

					.left {

						image {
							float: left;
							width: 40rpx;
							height: 40rpx;
							margin-top: -6rpx;
						}

						.name {
							font-size: 28rpx;
							color: #333333;
							float: left;
						}
					}

					.right {

						image {
							float: left;
							width: 40rpx;
							height: 40rpx;
							margin-top: -6rpx;
						}

						.name {
							font-size: 28rpx;
							color: #368BF8;
							float: left;
						}
					}
				}

				.shuju {
					width: 100%;
					padding: 30rpx 26rpx;
					box-sizing: border-box;
					border-radius: 16rpx;

					.liebiao {
						width: 25%;
						text-align: center;
						float: left;

						.shuzi {
							font-size: 40rpx;
							color: #333333;
							font-weight: 700;
							margin-bottom: 10rpx;
						}

						.names {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.shebei {
			margin-top: 20rpx;

			.data {
				width: 100%;
				padding: 10rpx 50rpx;
				background: #FFFFFF;
				margin-bottom: 20rpx;

				view {
					display: inline-block;
					margin-right: 10rpx;
					font-size: 22rpx;

					text {
						font-size: 22rpx;
					}
				}

				view:last-child {
					margin-right: 0;
				}
			}

			.content {
				width: 100%;
				padding: 0 40rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				position: absolute;

				.list {
					width: 100%;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 26rpx;
					box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;

					.top {
						width: 100%;
						border-bottom: 1rpx solid #F1F1F1;
						padding-bottom: 20rpx;

						image {
							width: 72rpx;
							height: 72rpx;
							margin-right: 20rpx;
						}

						.title {
							font-size: 28rpx;
							color: #333333;
							margin-top: 22rpx;
							font-weight: 700;
						}

						.money {
							font-size: 28rpx;
							color: #8B8CFF;
							margin-top: 22rpx;
							margin-right: 8rpx;
							font-weight: 700;
						}

						.money1 {
							font-size: 28rpx;
							color: #FA5E5C;
							margin-top: 22rpx;
							margin-right: 8rpx;
							font-weight: 700;
						}
					}

					.center {
						width: 96%;
						margin: 0 auto;
						margin-top: 20rpx;
						border-bottom: 1rpx solid #F1F1F1;
						padding-bottom: 20rpx;

						.desc {
							width: 90%;
							font-size: 24rpx;
							color: #333333;
							line-height: 44rpx;
						}

						.color {
							font-size: 24rpx;
							color: #5C88FA;
						}
					}

					.bottom {
						width: 96%;
						margin: 0 auto;
						margin-top: 20rpx;
						position: relative;

						.name {
							width: 90%;
							font-size: 24rpx;
							color: #333333;
							float: left;
							line-height: 36rpx;
						}

						.desc {
							width: 90%;
							font-size: 24rpx;
							color: #333333;
							line-height: 44rpx;
						}

						image {
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}

			.empty {
				width: 100%;
				margin: 200rpx auto 0;
				text-align: center;

				image {
					width: 390rpx;
					height: 340rpx;
				}

				text {
					display: block;
					margin-top: 60rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.order {
			margin-top: 20rpx;

			.dingdan {
				width: 100%;
				padding: 0 26rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.li {
					width: 100%;
					position: relative;
					padding: 30rpx;
					margin-bottom: 20rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.cen {
						width: 480rpx;
						float: left;

						text {
							display: block;
						}

						.title {
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 6rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.right {
						float: right;
						height: 76rpx;
						line-height: 76rpx;
						color: #333333;
					}
				}
			}

			.empty {
				width: 100%;
				margin: 200rpx auto 0;
				text-align: center;
				padding-bottom: 20rpx;

				image {
					width: 390rpx;
					height: 340rpx;
				}

				text {
					display: block;
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.guding {
			position: fixed;
			right: 40rpx;
			bottom: 40rpx;
			width: 92rpx;

			.con {
				width: 100%;
				height: 92rpx;
				text-align: center;
				position: relative;
				margin-bottom: 30rpx;

				image {
					width: 92rpx;
					height: 92rpx;
				}

				text {
					position: absolute;
					display: block;
					width: 92rpx;
					left: 0;
					bottom: 4rpx;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>